<template>
  <div class="section_8 flex-col">
    <div class="box_3 flex-row">
      <img
        class="image_1"
        referrerpolicy="no-referrer"
        src="@/assets/images/detail-title-icon.png"
      />
      <div class="group_12 flex-col justify-between">
        <span class="text_14">这是实验名称这是实验名称</span>
        <div class="box_4 flex-row justify-between">
          <span class="text_15">测评日期：2025-04-23</span>
          <img
            class="thumbnail_5"
            referrerpolicy="no-referrer"
            src="/lanhu/SketchPng35fb43c425a812fe169f3a0665a87a366d74f116a257d651aca4d7544c40f86c.png"
          />
          <span class="text_16">总测评时间：1小时35分钟</span>
        </div>
      </div>
      <img
        class="thumbnail_6"
        referrerpolicy="no-referrer"
        src="/lanhu/SketchPng35fb43c425a812fe169f3a0665a87a366d74f116a257d651aca4d7544c40f86c.png"
      />
      <span class="text_17">测评人数：23</span>
      <img
        class="thumbnail_7"
        referrerpolicy="no-referrer"
        src="/lanhu/SketchPng35fb43c425a812fe169f3a0665a87a366d74f116a257d651aca4d7544c40f86c.png"
      />
      <span class="text_18">测评班级：3年1班</span>
      <div class="group_13 flex-row">
        <img
          class="thumbnail_8"
          referrerpolicy="no-referrer"
          src="@/assets/icon-download.png"
        />
        <span class="text_19">导出报告</span>
      </div>
    </div>
    <div class="box_5 flex-row justify-between">
      <div class="box_6 flex-col justify-between">
        <div class="block_1 flex-row">
          <div class="text-wrapper_4 flex-col">
            <span class="text_20">参加测评人数</span>
            <span class="text_21">22/23</span>
          </div>
          <div class="group_14 flex-col">
            <span class="text_22">平均用时</span>
            <div class="text-wrapper_5 flex-row justify-between">
              <span class="text_23">78</span>
              <span class="text_24">分钟</span>
            </div>
          </div>
          <div class="group_15 flex-col">
            <span class="text_25">实验台利用率</span>
            <div class="text-wrapper_6 flex-row justify-between">
              <span class="text_26">187.3</span>
              <span class="text_27">%</span>
            </div>
          </div>
          <div class="group_16 flex-col">
            <div class="text-wrapper_7 flex-row">
              <span class="text_28">存储空间</span>
            </div>
            <div class="text-wrapper_8 flex-row justify-between">
              <span class="text_29">1080.3</span>
              <span class="text_30">MB</span>
            </div>
          </div>
        </div>
        <div class="block_2 flex-col">
          <div class="section_9 flex-row">
            <span class="text_31">平均得分</span>
            <div class="image-text_3 flex-row justify-between">
              <div class="group_17 flex-col"></div>
              <span class="text-group_3">本次测评</span>
            </div>
            <div class="image-text_4 flex-row justify-between">
              <div class="group_18 flex-col"></div>
              <span class="text-group_4">多次测评</span>
            </div>
          </div>
          <img
            class="image_2"
            referrerpolicy="no-referrer"
            src="/lanhu/SketchPng3b543e0fd2ef9b1527a2aa7e7875f83cf6990926372075bdc879cb28b05446b7.png"
          />
          <div class="section_10 flex-row justify-between">
            <div class="text-wrapper_9 flex-col">
              <span class="text_32">10</span>
              <span class="text_33">8</span>
              <span class="text_34">6</span>
              <span class="text_35">4</span>
              <span class="text_36">2</span>
              <span class="text_37">0</span>
            </div>
            <img
              class="image_3"
              referrerpolicy="no-referrer"
              src="/lanhu/SketchPng6486d274add6f3820cb7ee70223e62c0a85a91109134ef4a77f6b3a20c38659a.png"
            />
          </div>
          <div class="text-wrapper_10 flex-row">
            <span class="text_38">A+</span>
            <span class="text_39">A</span>
            <span class="text_40">A-</span>
            <span class="text_41">B</span>
            <span class="text_42">B+</span>
            <span class="text_43">B-</span>
            <span class="text_44">C+</span> <span class="text_45">C</span>
          </div>
        </div>
      </div>
      <div class="box_7 flex-col">
        <div class="box_8 flex-row">
          <img
            class="thumbnail_9"
            referrerpolicy="no-referrer"
            src="/lanhu/SketchPng356d1cd79a22a7ef9cc2f4f94d80b51f16c7fc1f959052a8542bedb163ea9dce.png"
          />
          <span class="text_46">1号实验台</span>
          <span class="text_47">23人/次</span>
          <div class="text-wrapper_11 flex-col" @click="handleDetail">
            <span class="text_48">查看报告</span>
          </div>
        </div>
        <div class="box_9 flex-row">
          <img
            class="thumbnail_10"
            referrerpolicy="no-referrer"
            src="/lanhu/SketchPng356d1cd79a22a7ef9cc2f4f94d80b51f16c7fc1f959052a8542bedb163ea9dce.png"
          />
          <span class="text_49">2号实验台</span>
          <span class="text_50">23人/次</span>
          <div class="text-wrapper_12 flex-col"  @click="handleDetail">
            <span class="text_51">查看报告</span>
          </div>
        </div>
        <div class="box_10 flex-row">
          <div class="image-text_5 flex-row justify-between">
            <img
              class="thumbnail_11"
              referrerpolicy="no-referrer"
              src="/lanhu/SketchPng5fa2de6143b378ab24cb46c717cc16f5227151106cdb0d6378594df9dfa734c3.png"
            />
            <span class="text-group_5">3号实验台</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import { useGlobalStore } from "@/store/modules/global";
const store = useGlobalStore();
const router = useRouter();
const handleDetail = () => {
  store.setSubTitle("个人设备测评报告");
  router.push({
    path: "/evaluation-report",
  });
};
</script>
<style lang="less" scoped>
.section_8 {
  background-color: rgba(240, 244, 247, 1);
  border-radius: 8px;
  padding: 20px;
  .box_3 {
    box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px 8px 0px 0px;
    height: 92px;
    padding: 0 20px;
    .image_1 {
      width: 60px;
      height: 60px;
      margin-top: 16px;
    }
    .group_12 {
      width: 343px;
      height: 51px;
      margin: 20px 0 0 20px;
      .text_14 {
        width: 192px;
        height: 30px;
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        text-align: left;
        white-space: nowrap;
        line-height: 30px;
      }
      .box_4 {
        width: 343px;
        height: 20px;
        margin-top: 1px;
        .text_15 {
          width: 155px;
          height: 20px;
          overflow-wrap: break-word;
          color: rgba(102, 102, 102, 1);
          font-size: 14px;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 20px;
        }
        .thumbnail_5 {
          width: 1px;
          height: 8px;
          margin: 7px 0 0 12px;
        }
        .text_16 {
          width: 163px;
          height: 20px;
          overflow-wrap: break-word;
          color: rgba(102, 102, 102, 1);
          font-size: 14px;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 20px;
          margin-left: 12px;
        }
      }
    }
    .thumbnail_6 {
      width: 1px;
      height: 8px;
      margin: 58px 0 0 12px;
    }
    .text_17 {
      width: 87px;
      height: 20px;
      overflow-wrap: break-word;
      color: rgba(102, 102, 102, 1);
      font-size: 14px;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 20px;
      margin: 51px 0 0 12px;
    }
    .thumbnail_7 {
      width: 1px;
      height: 8px;
      margin: 58px 0 0 12px;
    }
    .text_18 {
      width: 113px;
      height: 20px;
      overflow-wrap: break-word;
      color: rgba(102, 102, 102, 1);
      font-size: 14px;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 20px;
      margin: 51px 0 0 12px;
    }
    .group_13 {
      background-color: rgba(255, 255, 255, 1);
      border-radius: 8px;
      width: 110px;
      height: 40px;
      border: 1px solid rgba(190, 196, 202, 1);
      margin: 26px 0 0 309px;
      .thumbnail_8 {
        width: 16px;
        height: 16px;
        margin: 12px 0 0 16px;
      }
      .text_19 {
        width: 56px;
        height: 16px;
        overflow-wrap: break-word;
        color: rgba(38, 38, 38, 1);
        font-size: 14px;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 16px;
        margin: 12px 15px 0 7px;
      }
    }
  }
  .box_5 {
    height: 592px;
    margin: 12px 0 12px 0px;
    .box_6 {
      width: 731px;
      height: 592px;
      .block_1 {
        width: 731px;
        height: 104px;
        .text-wrapper_4 {
          background-color: rgba(255, 255, 255, 1);
          width: 174px;
          height: 104px;
          justify-content: flex-center;
          .text_20 {
            width: 72px;
            height: 16px;
            overflow-wrap: break-word;
            color: rgba(89, 89, 89, 1);
            font-size: 12px;
            font-weight: normal;
            text-align: right;
            white-space: nowrap;
            line-height: 16px;
            margin: 26px 0 0 51px;
          }
          .text_21 {
            width: 60px;
            height: 26px;
            overflow-wrap: break-word;
            color: rgba(38, 38, 38, 1);
            font-size: 24px;
            font-family: Impact;
            font-weight: normal;
            text-align: right;
            white-space: nowrap;
            line-height: 26px;
            margin: 10px 0 26px 57px;
          }
        }
        .group_14 {
          background-color: rgba(255, 255, 255, 1);
          width: 174px;
          height: 104px;
          margin-left: 12px;
          justify-content: flex-center;
          .text_22 {
            width: 48px;
            height: 16px;
            overflow-wrap: break-word;
            color: rgba(89, 89, 89, 1);
            font-size: 12px;
            font-weight: normal;
            text-align: right;
            white-space: nowrap;
            line-height: 16px;
            margin: 26px 0 0 63px;
          }
          .text-wrapper_5 {
            width: 51px;
            height: 26px;
            margin: 10px 0 26px 63px;
            .text_23 {
              width: 24px;
              height: 26px;
              overflow-wrap: break-word;
              color: rgba(38, 38, 38, 1);
              font-size: 24px;
              font-family: Impact;
              font-weight: normal;
              text-align: right;
              white-space: nowrap;
              line-height: 26px;
            }
            .text_24 {
              width: 24px;
              height: 16px;
              overflow-wrap: break-word;
              color: rgba(38, 38, 38, 1);
              font-size: 12px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 16px;
              margin-top: 10px;
            }
          }
        }
        .group_15 {
          background-color: rgba(255, 255, 255, 1);
          width: 174px;
          height: 104px;
          margin-left: 12px;
          justify-content: flex-center;
          .text_25 {
            width: 72px;
            height: 16px;
            overflow-wrap: break-word;
            color: rgba(89, 89, 89, 1);
            font-size: 12px;
            font-weight: normal;
            text-align: right;
            white-space: nowrap;
            line-height: 16px;
            margin: 26px 0 0 47px;
          }
          .text-wrapper_6 {
            width: 66px;
            height: 26px;
            margin: 10px 0 26px 50px;
            .text_26 {
              width: 50px;
              height: 26px;
              overflow-wrap: break-word;
              color: rgba(38, 38, 38, 1);
              font-size: 24px;
              font-family: Impact;
              font-weight: normal;
              text-align: right;
              white-space: nowrap;
              line-height: 26px;
            }
            .text_27 {
              width: 12px;
              height: 16px;
              overflow-wrap: break-word;
              color: rgba(38, 38, 38, 1);
              font-size: 12px;
              font-weight: normal;
              text-align: right;
              white-space: nowrap;
              line-height: 16px;
              margin-top: 10px;
            }
          }
        }
        .group_16 {
          background-color: rgba(255, 255, 255, 1);
          height: 104px;
          margin-left: 11px;
          width: 174px;
          justify-content: flex-center;
          .text-wrapper_7 {
            width: 48px;
            height: 16px;
            margin: 26px 0 0 63px;
            .text_28 {
              width: 48px;
              height: 16px;
              overflow-wrap: break-word;
              color: rgba(89, 89, 89, 1);
              font-size: 12px;
              font-weight: normal;
              text-align: right;
              white-space: nowrap;
              line-height: 16px;
            }
          }
          .text-wrapper_8 {
            width: 92px;
            height: 26px;
            margin: 10px 0 26px 41px;
            .text_29 {
              width: 66px;
              height: 26px;
              overflow-wrap: break-word;
              color: rgba(38, 38, 38, 1);
              font-size: 24px;
              font-family: Impact;
              font-weight: normal;
              text-align: right;
              white-space: nowrap;
              line-height: 26px;
            }
            .text_30 {
              width: 20px;
              height: 16px;
              overflow-wrap: break-word;
              color: rgba(38, 38, 38, 1);
              font-size: 12px;
              font-weight: normal;
              text-align: right;
              white-space: nowrap;
              line-height: 16px;
              margin-top: 9px;
            }
          }
        }
      }
      .block_2 {
        background-color: rgba(255, 255, 255, 1);
        width: 730px;
        height: 476px;
        margin-top: 12px;
        justify-content: flex-center;
        .section_9 {
          width: 698px;
          height: 22px;
          margin: 16px 0 0 16px;
          .text_31 {
            width: 64px;
            height: 22px;
            overflow-wrap: break-word;
            color: rgba(38, 38, 38, 1);
            font-size: 16px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            text-align: left;
            white-space: nowrap;
            line-height: 22px;
          }
          .image-text_3 {
            width: 68px;
            height: 16px;
            margin: 3px 0 0 468px;
            .group_17 {
              background-color: rgba(39, 118, 255, 1);
              width: 12px;
              height: 12px;
              margin-top: 2px;
            }
            .text-group_3 {
              width: 48px;
              height: 16px;
              overflow-wrap: break-word;
              color: rgba(38, 38, 38, 1);
              font-size: 12px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 16px;
            }
          }
          .image-text_4 {
            width: 68px;
            height: 16px;
            margin: 3px 0 0 30px;
            .group_18 {
              background-color: rgba(0, 192, 144, 1);
              width: 12px;
              height: 12px;
              margin-top: 2px;
            }
            .text-group_4 {
              width: 48px;
              height: 16px;
              overflow-wrap: break-word;
              color: rgba(38, 38, 38, 1);
              font-size: 12px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 16px;
            }
          }
        }
        .image_2 {
          width: 698px;
          height: 1px;
          margin: 16px 0 0 16px;
        }
        .section_10 {
          width: 698px;
          height: 364px;
          margin: 20px 0 0 16px;
          .text-wrapper_9 {
            width: 13px;
            height: 364px;
            .text_32 {
              width: 13px;
              height: 17px;
              overflow-wrap: break-word;
              color: rgba(140, 140, 140, 1);
              font-size: 12px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 17px;
            }
            .text_33 {
              width: 8px;
              height: 17px;
              overflow-wrap: break-word;
              color: rgba(140, 140, 140, 1);
              font-size: 12px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 17px;
              margin-top: 52px;
            }
            .text_34 {
              width: 8px;
              height: 17px;
              overflow-wrap: break-word;
              color: rgba(140, 140, 140, 1);
              font-size: 12px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 17px;
              margin-top: 61px;
            }
            .text_35 {
              width: 8px;
              height: 17px;
              overflow-wrap: break-word;
              color: rgba(140, 140, 140, 1);
              font-size: 12px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 17px;
              margin-top: 49px;
            }
            .text_36 {
              width: 8px;
              height: 17px;
              overflow-wrap: break-word;
              color: rgba(140, 140, 140, 1);
              font-size: 12px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 17px;
              margin-top: 55px;
            }
            .text_37 {
              width: 8px;
              height: 17px;
              overflow-wrap: break-word;
              color: rgba(140, 140, 140, 1);
              font-size: 12px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 17px;
              margin-top: 45px;
            }
          }
          .image_3 {
            width: 678px;
            height: 355px;
            margin-top: 9px;
          }
        }
        .text-wrapper_10 {
          width: 577px;
          height: 17px;
          margin: 4px 0 16px 81px;
          .text_38 {
            width: 16px;
            height: 17px;
            overflow-wrap: break-word;
            color: rgba(38, 38, 38, 1);
            font-size: 12px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 17px;
          }
          .text_39 {
            width: 8px;
            height: 17px;
            overflow-wrap: break-word;
            color: rgba(38, 38, 38, 1);
            font-size: 12px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 17px;
            margin-left: 73px;
          }
          .text_40 {
            width: 16px;
            height: 17px;
            overflow-wrap: break-word;
            color: rgba(38, 38, 38, 1);
            font-size: 12px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 17px;
            margin-left: 71px;
          }
          .text_41 {
            width: 9px;
            height: 17px;
            overflow-wrap: break-word;
            color: rgba(38, 38, 38, 1);
            font-size: 12px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 17px;
            margin-left: 63px;
          }
          .text_42 {
            width: 16px;
            height: 17px;
            overflow-wrap: break-word;
            color: rgba(38, 38, 38, 1);
            font-size: 12px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 17px;
            margin-left: 70px;
          }
          .text_43 {
            width: 16px;
            height: 17px;
            overflow-wrap: break-word;
            color: rgba(38, 38, 38, 1);
            font-size: 12px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 17px;
            margin-left: 62px;
          }
          .text_44 {
            width: 16px;
            height: 17px;
            overflow-wrap: break-word;
            color: rgba(38, 38, 38, 1);
            font-size: 12px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 17px;
            margin-left: 62px;
          }
          .text_45 {
            width: 9px;
            height: 17px;
            overflow-wrap: break-word;
            color: rgba(38, 38, 38, 1);
            font-size: 12px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 17px;
            margin-left: 70px;
          }
        }
      }
    }
    .box_7 {
      background-color: rgba(255, 255, 255, 1);
      flex: 1;
      margin-left: 20px;
      height: 592px;
      .box_8 {
        box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
        background-color: rgba(255, 255, 255, 1);
        width: 304px;
        height: 52px;
        margin-left: 12px;
        justify-content: flex-center;
        .thumbnail_9 {
          width: 20px;
          height: 20px;
          margin: 16px 0 0 4px;
        }
        .text_46 {
          width: 62px;
          height: 20px;
          overflow-wrap: break-word;
          color: rgba(38, 38, 38, 1);
          font-size: 14px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          text-align: left;
          white-space: nowrap;
          line-height: 20px;
          margin: 16px 0 0 8px;
        }
        .text_47 {
          width: 52px;
          height: 20px;
          overflow-wrap: break-word;
          color: rgba(38, 38, 38, 1);
          font-size: 14px;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 20px;
          margin: 16px 0 0 17px;
        }
        .text-wrapper_11 {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 6px;
          height: 28px;
          border: 1px solid rgba(39, 118, 255, 1);
          width: 72px;
          margin: 12px 4px 0 65px;
          .text_48 {
            width: 48px;
            height: 16px;
            overflow-wrap: break-word;
            color: rgba(39, 118, 255, 1);
            font-size: 12px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 16px;
            margin: 6px 0 0 12px;
          }
        }
      }
      .box_9 {
        box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
        background-color: rgba(255, 255, 255, 1);
        width: 304px;
        height: 52px;
        margin-left: 12px;
        justify-content: flex-center;
        .thumbnail_10 {
          width: 20px;
          height: 20px;
          margin: 16px 0 0 4px;
        }
        .text_49 {
          width: 65px;
          height: 20px;
          overflow-wrap: break-word;
          color: rgba(38, 38, 38, 1);
          font-size: 14px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          text-align: left;
          white-space: nowrap;
          line-height: 20px;
          margin: 16px 0 0 8px;
        }
        .text_50 {
          width: 52px;
          height: 20px;
          overflow-wrap: break-word;
          color: rgba(38, 38, 38, 1);
          font-size: 14px;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 20px;
          margin: 16px 0 0 14px;
        }
        .text-wrapper_12 {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 6px;
          height: 28px;
          border: 1px solid rgba(39, 118, 255, 1);
          width: 72px;
          margin: 12px 4px 0 65px;
          .text_51 {
            width: 48px;
            height: 16px;
            overflow-wrap: break-word;
            color: rgba(39, 118, 255, 1);
            font-size: 12px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 16px;
            margin: 6px 0 0 12px;
          }
        }
      }
      .box_10 {
        box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
        background-color: rgba(255, 255, 255, 1);
        width: 304px;
        height: 52px;
        margin: 0 0 436px 12px;
        .image-text_5 {
          width: 93px;
          height: 20px;
          margin: 16px 0 0 4px;
          .thumbnail_11 {
            width: 20px;
            height: 20px;
          }
          .text-group_5 {
            width: 65px;
            height: 20px;
            overflow-wrap: break-word;
            color: rgba(38, 38, 38, 1);
            font-size: 14px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            text-align: left;
            white-space: nowrap;
            line-height: 20px;
          }
        }
      }
    }
  }
}
</style>
